<!--
 * @Description: 
 * @Date: 2025-07-01 10:00:41
 * @LastEditTime: 2025-08-08 15:11:04
-->
<template>
  <van-nav-bar title="设置"></van-nav-bar>
  <img src="../assets/img/manA.png" alt="" width="150" height="150" class="avatar">
  <div class="name">{{store.getters.name}}</div>
  <div>
    <van-button type="primary" @click="logout" class="logout"
      >退出登录</van-button
    >
  </div>
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o" @click="goToPage('main')"
      >首页</van-tabbar-item
    >
    <van-tabbar-item icon="setting-o" @click="goToPage('settings')"
      >我的</van-tabbar-item
    >
  </van-tabbar>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import store from "@/store";
import { Toast } from "vant";

const router = useRouter();

let logout = async () => {
  await store.dispatch("user/logout");
  Toast.success("退出登录成功");
  router.push({
    path: '/login',
    query: {
      redirect: router.fullPath,
    },
  })
};

const active = ref(1);
const goToPage = (name) => {
  switch (name) {
    case "main":
      router.push("/main");
      break;
    case "settings":
      router.push("/settings");
      break;
  }
};
</script>

<style scoped>
.avatar {
  border: 1px solid blue;
  margin-top: 20px;
  border-radius: 50%;
}
.name {
  margin-top: 20px;
  font-weight: bold;
}
.logout {
  margin-top: 20px;
}
</style>
